"use client"

import * as React from "react"

import { useColors } from "~/hooks/use-colors"
import { type Color, getColorFormat } from "~/lib/colors"
import { ny } from "~/lib/utils"
import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
} from "~/registry/miami/ui/select"
import { Skeleton } from "~/registry/miami/ui/skeleton"

export function ColorFormatSelector({
   color,
   className,
   ...props
}: Omit<React.ComponentProps<typeof SelectTrigger>, "color"> & {
   color: Color
}) {
   const { format, setFormat, isLoading } = useColors()
   const formats = React.useMemo(() => getColorFormat(color), [color])

   if (isLoading) {
      return <ColorFormatSelectorSkeleton />
   }

   return (
      <Select value={format} onValueChange={setFormat}>
         <SelectTrigger
            className={ny(
               "h-7 w-auto gap-1.5 rounded-lg pr-2 text-xs",
               className,
            )}
            {...props}
         >
            <span className="font-medium">Format: </span>
            <span className="font-mono text-xs text-muted-foreground">
               {format}
            </span>
         </SelectTrigger>
         <SelectContent align="end" className="rounded-xl">
            {Object.entries(formats).map(([format, value]) => (
               <SelectItem
                  key={format}
                  value={format}
                  className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
               >
                  <span className="font-medium">{format}</span>
                  <span className="font-mono text-xs text-muted-foreground">
                     {value}
                  </span>
               </SelectItem>
            ))}
         </SelectContent>
      </Select>
   )
}

export function ColorFormatSelectorSkeleton({
   className,
   ...props
}: React.ComponentProps<typeof Skeleton>) {
   return (
      <Skeleton
         className={ny("h-7 w-[116px] gap-1.5 rounded-lg", className)}
         {...props}
      />
   )
}
